<template>
	<view :style="viewColor">
		<form @submit="submitSub" report-submit='true'>
			<view class="payment-top acea-row row-column row-center-wrapper">
				<span class="name">我的鱼币</span>
				<view class="pic">
					<span class="pic-font">{{ userinfo.yubi_money || 0 }}</span>
				</view>
			</view>
			<view class="payment">
				<view class="tip">
					<view class='input'><text>￥</text><input :placeholder="placeholder" type='number' placeholder-class='placeholder' :value="number"
						 name="number"></input></view>
					<view class="tips-title">
						<view style="margin-top: 10rpx;">当前鱼币为 <text class='t-color'>{{userinfo.yubi_money || 0}}</text></view>
					</view>
					<view class="tips-box">
						<view class="tips mt-30 font-size32-bold">注意事项：</view>
						<view class="tips-samll">
							{{ userinfo.yubi_to_money }}鱼币等于1佣金
						</view>
						<view class="tips-samll">
							{{ userinfo.min_yubi_to_money }}鱼币起转
						</view>
					</view>
				</view>
				<button class='but font-size36-bold' formType="submit"> 立即转入</button>
			</view>
		</form>
		<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
	</view>
</template>

<script>
	 
	import {
		spreadInfo,
		rechargeBrokerage
	} from '@/api/user.js';
	import {
		mapGetters
	} from "vuex";
	import authorize from '@/components/Authorize';
	import { openPaySubscribe } from '@/utils/SubscribeMessage.js';
	export default {
		components: {
			authorize,
		},
		data() {
			let that = this;
			return {
				number: '',
				userinfo: {},
				placeholder: "0.00",
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
			};
		},
		computed: mapGetters(['isLogin','viewColor']),
		onLoad(options) {
			if (this.isLogin) {
				this.getUserInfo();
			} else {
				this.isAuto = true;
				this.isShowAuth = true
			}
		},
		methods: {
			onLoadFun: function() {
				this.isShowAuth = false;
				this.getUserInfo();
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			/**
			 * 获取用户信息
			 */
			getUserInfo: function() {
				let that = this;
				spreadInfo().then(res => {
					that.$set(that, 'userinfo', res.data);
				})
			},
			submitSub: function(e) {
							let that = this
							let value = e.detail.value.number;
							// 转入余额
							if (parseFloat(value) < 0 || parseFloat(value) == NaN || value == undefined || value == "") {
								return that.$util.Tips({
									title: '请输入金额'
								});
							}
							console.log(666, parseFloat(that.userinfo.min_yubi_to_money), parseFloat(that.userinfo.yubi_money))
							if(parseFloat(that.userinfo.min_yubi_to_money) > parseFloat(that.userinfo.yubi_money)) {
								return uni.showModal({
									title: '鱼币不足',
									content: '你的鱼币未满'+parseFloat(that.userinfo.min_yubi_to_money).toFixed(2)+',请继续发布需求信息获得奖励。',
									showCancel: false,
									confirmText: '发布需求',
									success(res) {
										return that.$util.Tips('/pages/plantGrass/plant_release/index?type=3');
									}
								});
							}
							if(parseFloat(value) > parseFloat(that.userinfo.yubi_money).toFixed(2)){
								return that.$util.Tips({
									title: '剩余可用鱼币' + parseFloat(that.userinfo.yubi_money)
								});
							}
							uni.showModal({
								title: '转入佣金',
								content: '转入佣金后无法再次转出，确认是否转入佣金',
								success(res) {
									if (res.confirm) {
										rechargeBrokerage({
											brokerage: parseFloat(value),
										}).then(res => {
												// that.$set(that, 'userinfo.now_money', that.$util.$h.Add(value, that.userinfo.now_money))
												return that.$util.Tips({
													title: '转入成功',
													icon: 'success'
												}, {
													tab: 5,
													url: '/pages/users/user_money/index'
												});
											}).catch(err => {
												return that.$util.Tips({
													title: err
												})
											});
									} else if (res.cancel) {
										return that.$util.Tips({
											title: '已取消'
										});
									}
								},
							})
						},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}

	.payment {
		position: relative;
		top: -60rpx;
		width: 100%;
		background-color: #fff;
		border-radius: 10rpx;
		padding-top: 25rpx;
		border-top-right-radius: 39rpx;
		border-top-left-radius: 39rpx;
	}

	.payment .nav {
		height: 75rpx;
		line-height: 75rpx;
		padding: 0 100rpx;
	}

	.payment .nav .item {
		font-size: 30rpx;
		color: #333;
	}

	.payment .nav .item.on {
		font-weight: bold;
		border-bottom: 4rpx solid var(--view-theme);
	}
	.t-color{color:var(--view-theme);}
	.payment .input {
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 1px dashed #dddddd;
		margin: 60rpx auto 0 auto;
		padding-bottom: 20rpx;
		font-size: 56rpx;
		color: #333333;
		flex-wrap: nowrap;
	}
	.payment .input text {
		padding-left: 106rpx;
	}
	.payment .input input {
		padding-right: 106rpx;
		width: 300rpx;
		height: 94rpx;
		text-align: center;
		font-size: 70rpx;
	}
	.payment .placeholder {
		color: #d0d0d0;
		height: 100%;
		line-height: 94rpx;
	}

	.payment .tip {
		font-size: 26rpx;
		color: #888888;
		padding: 0 30rpx;
		margin-top: 25rpx;
	}

	.payment .but {
		width: fit-content;
		padding: 20rpx 100rpx;
		border-radius: 50rpx;
		margin: 46rpx auto 0 auto;
		background-color: var(--view-theme);
	}

	.payment-top {
		width: 100%;
		height: 350rpx;
		background-color: var(--view-theme);

		.name {
			font-size: 26rpx;
			color: rgba(255, 255, 255, 0.8);
			margin-top: -38rpx;
			margin-bottom: 30rpx;
		}

		.pic {
			font-size: 32rpx;
			color: #fff;
		}

		.pic-font {
			font-size: 78rpx;
			color: #fff;
		}
	}

	.tips-box {
		.tips {
			color: #000;
			margin-bottom: 14rpx;
			margin-top: 20rpx;
		}

		.tips-samll {
			color: #000;
			font-size: 32rpx;
			margin-bottom: 14rpx;
		}

		.tip-box {
			margin-top: 30rpx;
		}
	}

	.tips-title {
		margin-top: 20rpx;
		font-size: 32rpx;
		color: #333;
	}
</style>
